import 'package:flutter/material.dart';
import 'package:flutter_app/models/character.dart';
import 'package:after_layout/after_layout.dart';

class CharacterDetailScreen extends StatefulWidget {
  final Character character;
  final double _initSheetBottom = -320;
  final double _seedExpandedSheetBottom = -250;
  final double _expandedSheetBottom = 0;
  const CharacterDetailScreen({Key key, this.character}) : super(key: key);

  @override
  _CharacterDetailScreenState createState() => _CharacterDetailScreenState();
}

class _CharacterDetailScreenState extends State<CharacterDetailScreen>
    with AfterLayoutMixin<CharacterDetailScreen> {
  double _bottomSheetBottomPosition;
  bool isCollapsed = false;
  @override
  void initState() {
    _bottomSheetBottomPosition = widget._initSheetBottom;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
        body: Stack(fit: StackFit.expand, children: [
      Hero(
        tag: 'background-${widget.character.name}',
        child: DecoratedBox(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topRight,
                  end: Alignment.bottomLeft,
                  colors: [
                widget.character.colors[0],
                widget.character.colors[1]
              ])),
        ),
      ),
      SafeArea(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              InkWell(
                onTap: () {
                  setState(() {
                    _bottomSheetBottomPosition =
                        widget._seedExpandedSheetBottom;
                  });
                  Navigator.pop(context);
                },
                child: Icon(
                  Icons.close,
                  size: 40,
                  color: Colors.white.withOpacity(0.9),
                ),
              ),
              Align(
                  alignment: Alignment(0.9, 0),
                  child: Hero(
                      tag: 'image-${widget.character.name}',
                      child: Image.asset(
                        widget.character.imagePath,
                        height: screenHeight * 0.45,
                      ))),
              Padding(
                padding: const EdgeInsets.only(left: 15.0, right: 8.0),
                child: Hero(
                    tag: 'name-${widget.character.name}',
                    child: Material(
                        color: Colors.transparent,
                        child: Container(
                            child: Text(
                          widget.character.name,
                          style: Theme.of(context).textTheme.headline,
                        )))),
              ),
              Padding(
                padding:
                    const EdgeInsets.only(left: 15.0, right: 8.0, bottom: 100),
                child: Text(
                  widget.character.description,
                  style: Theme.of(context).textTheme.subhead,
                ),
              )
            ],
          ),
        ),
      ),
      AnimatedPositioned(
        duration: Duration(milliseconds: 230),
        curve: Curves.easeIn,
        bottom: _bottomSheetBottomPosition,
        left: 0,
        right: 0,
        child: Container(
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(40), topRight: Radius.circular(40))),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              InkWell(
                onTap: () {
                  Future.delayed(Duration(milliseconds: 250), () {
                    setState(() {
                      if (isCollapsed) {
                        isCollapsed = false;
                        _bottomSheetBottomPosition =
                            widget._expandedSheetBottom;
                      } else {
                        isCollapsed = true;
                        _bottomSheetBottomPosition =
                            widget._seedExpandedSheetBottom;
                      }
                    });
                  });
                },
                child: Container(
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.symmetric(horizontal: 32),
                  height: 70,
                  child: Text(
                    "Clips",
                  ),
                ),
              ),
              SingleChildScrollView(
                  scrollDirection: Axis.horizontal, child: _chipsWidget())
            ],
          ),
        ),
      )
    ]));
  }

  Widget _chipsWidget() {
    return Container(
        height: 240,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.orange,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.yellow,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.grey,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.blue,
                      borderRadius: BorderRadius.circular(10)),
                )
              ],
            ),
            Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.red,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.green,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.blueGrey,
                      borderRadius: BorderRadius.circular(10)),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                      color: Colors.teal,
                      borderRadius: BorderRadius.circular(10)),
                )
              ],
            )
          ],
        ));
  }

  @override
  void afterFirstLayout(BuildContext context) {
    Future.delayed(Duration(milliseconds: 250), () {
      setState(() {
        _bottomSheetBottomPosition = widget._seedExpandedSheetBottom;
        isCollapsed = true;
      });
    });
  }
}
